<script>
import {defineComponent} from 'vue'

export default defineComponent({
    name: "courseModule"
})
</script>

<template>
<div>
    <div class="course-box">
        <!-- 直播课程 -->
        <div class="left-box" style="padding-left: 8px; padding-right: 8px">
            <div class="content">
                <!-- 课程的顶部导航 -->
                <div class="con-title">
                    <div class="title-box">
                        <img
                                src=""
                                alt=""
                        />
                        <div class="text1">直播课程</div>
                        <div class="text2">互联网大佬在线直播</div>
                    </div>
                    <div class="title-live-next-last-box">
                        <img
                                src=""
                                alt=""
                        />
                        <img
                                src=""
                                alt=""
                        />
                    </div>
                </div>
                <!-- 课程的内容 -->
                <div class="con-text">
                    <div class="box">
                        <div class="live-content-box">
                            <div class="hover-img-scale-box">
                                <img
                                        src="	https://online-course.nos-eastchina1.126.net/1-1352930580794179584.png"
                                        alt=""
                                />
                            </div>
                            <div class="text">求职技巧之重难点问题剖析与解决</div>
                            <div class="end-box">
                                <svg
                                        t="1695361452304"
                                        class="icon"
                                        viewBox="0 0 1024 1024"
                                        version="1.1"
                                        xmlns="http://www.w3.org/2000/svg"
                                        p-id="1456"
                                        width="14"
                                        height="14"
                                >
                                    <path
                                            d="M512 896c-212.077 0-384-171.923-384-384s171.923-384 384-384 384 171.923 384 384-171.923 384-384 384z m0 64c247.424 0 448-200.576 448-448S759.424 64 512 64 64 264.576 64 512s200.576 448 448 448z"
                                            fill="#bfbfbf"
                                            p-id="1457"
                                    ></path>
                                    <path
                                            d="M767.696 347.343a8 8 0 0 0-11.314 0L445.137 658.588 268.598 482.049a8 8 0 0 0-11.314 0l-33.941 33.941a8 8 0 0 0 0 11.314l197.99 197.99c0.973 0.973 1.993 1.87 3.053 2.692 12.572 10.837 31.57 10.293 43.496-1.634l333.755-333.754a8 8 0 0 0 0-11.314l-33.941-33.941z"
                                            fill="#bfbfbf"
                                            p-id="1458"
                                    ></path>
                                </svg>
                                直播结束
                            </div>
                        </div>
                    </div>
                    <div class="box">
                        <div class="live-content-box">
                            <div class="hover-img-scale-box">
                                <img
                                        src="https://online-course.nos-eastchina1.126.net/%E7%9B%B4%E6%92%AD%E5%B0%81%E9%9D%A2-1254953535796150272.png"
                                        alt=""
                                />
                            </div>
                            <div class="text">IT开发编程方向之职业规划</div>
                            <div class="end-box">
                                <svg
                                        t="1695361452304"
                                        class="icon"
                                        viewBox="0 0 1024 1024"
                                        version="1.1"
                                        xmlns="http://www.w3.org/2000/svg"
                                        p-id="1456"
                                        width="14"
                                        height="14"
                                >
                                    <path
                                            d="M512 896c-212.077 0-384-171.923-384-384s171.923-384 384-384 384 171.923 384 384-171.923 384-384 384z m0 64c247.424 0 448-200.576 448-448S759.424 64 512 64 64 264.576 64 512s200.576 448 448 448z"
                                            fill="#bfbfbf"
                                            p-id="1457"
                                    ></path>
                                    <path
                                            d="M767.696 347.343a8 8 0 0 0-11.314 0L445.137 658.588 268.598 482.049a8 8 0 0 0-11.314 0l-33.941 33.941a8 8 0 0 0 0 11.314l197.99 197.99c0.973 0.973 1.993 1.87 3.053 2.692 12.572 10.837 31.57 10.293 43.496-1.634l333.755-333.754a8 8 0 0 0 0-11.314l-33.941-33.941z"
                                            fill="#bfbfbf"
                                            p-id="1458"
                                    ></path>
                                </svg>
                                直播结束
                            </div>
                        </div>
                    </div>
                    <div class="box">
                        <div class="live-content-box">
                            <div class="hover-img-scale-box">
                                <img
                                        src="https://online-course.nos-eastchina1.126.net/123-1252130152859566080.png"
                                        alt=""
                                />
                            </div>
                            <div class="text">研究生复试之高效准备简历的方法</div>
                            <div class="end-box">
                                <svg
                                        t="1695362017330"
                                        class="icon"
                                        viewBox="0 0 1024 1024"
                                        version="1.1"
                                        xmlns="http://www.w3.org/2000/svg"
                                        p-id="3427"
                                        width="14"
                                        height="14"
                                >
                                    <path
                                            d="M533.333333 896C332.8 896 170.666667 733.866667 170.666667 533.333333S332.8 170.666667 533.333333 170.666667 896 332.8 896 533.333333 733.866667 896 533.333333 896z m0-42.666667c174.933333 0 320-145.066667 320-320S708.266667 213.333333 533.333333 213.333333 213.333333 358.4 213.333333 533.333333 358.4 853.333333 533.333333 853.333333z m149.333334-320L469.333333 682.666667V384l213.333334 149.333333z m-68.266667 0L512 460.8v145.066667l102.4-72.533334z"
                                            fill="#bfbfbf"
                                            p-id="3428"
                                    ></path>
                                </svg>
                                07-08 19:30
                            </div>
                        </div>
                    </div>
                    <div class="box">
                        <div class="live-content-box">
                            <div class="hover-img-scale-box">
                                <img
                                        src="https://online-course.nos-eastchina1.126.net/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95%20%E5%9F%BA%E7%A1%80%E7%AF%87%20%E6%8B%B7%E8%B4%9D-1252123020651134976.jpg"
                                        alt=""
                                />
                            </div>
                            <div class="text">十大经典排序之Part-6-完结篇</div>
                            <div class="end-box">
                                <svg
                                        t="1695361452304"
                                        class="icon"
                                        viewBox="0 0 1024 1024"
                                        version="1.1"
                                        xmlns="http://www.w3.org/2000/svg"
                                        p-id="1456"
                                        width="14"
                                        height="14"
                                >
                                    <path
                                            d="M512 896c-212.077 0-384-171.923-384-384s171.923-384 384-384 384 171.923 384 384-171.923 384-384 384z m0 64c247.424 0 448-200.576 448-448S759.424 64 512 64 64 264.576 64 512s200.576 448 448 448z"
                                            fill="#bfbfbf"
                                            p-id="1457"
                                    ></path>
                                    <path
                                            d="M767.696 347.343a8 8 0 0 0-11.314 0L445.137 658.588 268.598 482.049a8 8 0 0 0-11.314 0l-33.941 33.941a8 8 0 0 0 0 11.314l197.99 197.99c0.973 0.973 1.993 1.87 3.053 2.692 12.572 10.837 31.57 10.293 43.496-1.634l333.755-333.754a8 8 0 0 0 0-11.314l-33.941-33.941z"
                                            fill="#bfbfbf"
                                            p-id="1458"
                                    ></path>
                                </svg>
                                直播结束
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 课程榜单 -->
        <div class="right-box">
            <div class="content">
                <!-- 标题 -->
                <div class="title-box">
                    <img
                            src=""
                            alt=""
                    />
                    <div class="text">课程榜单</div>
                    <div class="text-small">以购买、学习相关数据为依据～每日更新</div>
                </div>
                <!-- 内容 -->
                <div class="content-box">
                    <img
                            src="https://course.myhope365.com/img/bestseller-list.23c00d98.png"
                            alt=""
                    />
                    <div class="content">
                        <div class="box1">
                            <div
                                    class="left-num"
                                    style="background-color: rgb(252, 139, 51)"
                            >
                                NO.1
                            </div>
                            <div data-v-3030c6dc="" class="hover-img-scale-box">
                                <img
                                        data-v-3030c6dc=""
                                        src="https://online-course.nos-eastchina1.126.net/求职成功之道与术_1-1227885610962780160.jpg"
                                        alt=""
                                />
                            </div>
                            <div data-v-3030c6dc="" class="title-price-box">
                                <div class="text1">求职成功之道与术</div>
                                <div class="text2">¥800</div>
                                <div class="text3">635 人报名</div>
                            </div>
                        </div>
                        <div class="box1">
                            <div
                                    class="left-num"
                                    style="background-color: rgb(193, 182, 177)"
                            >
                                NO.2
                            </div>
                            <div data-v-3030c6dc="" class="hover-img-scale-box">
                                <img
                                        data-v-3030c6dc=""
                                        src="https://online-course.nos-eastchina1.126.net/%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1_%E5%AE%A3%E4%BC%A0%E5%9B%BE-1206867183058026496.png"
                                        alt=""
                                />
                            </div>
                            <div data-v-3030c6dc="" class="title-price-box">
                                <div class="text1">毕设从小白到老司机修成记</div>
                                <div class="text2">¥1000</div>
                                <div class="text3">601 人报名</div>
                            </div>
                        </div>
                        <div class="box1">
                            <div
                                    class="left-num"
                                    style="background-color: rgb(235, 77, 134)"
                            >
                                NO.3
                            </div>
                            <div data-v-3030c6dc="" class="hover-img-scale-box">
                                <img
                                        data-v-3030c6dc=""
                                        src="https://online-course.nos-eastchina1.126.net/hadoopcore%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E5%AE%9E%E6%88%98-1257989668687839232.jpg"
                                        alt=""
                                />
                            </div>
                            <div data-v-3030c6dc="" class="title-price-box">
                                <div class="text1">hadoopcore从入门到实战</div>
                                <div class="text2">¥99.9</div>
                                <div class="text3">125 人报名</div>
                            </div>
                        </div>
                    </div>
                    <button class="change-box">换一换</button>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<style scoped lang="less">
.course-box{
  display: flex;
  width: 1160px;
  margin: auto;
  height: 663px;
}
/* 直播课程 */
.course-box >  .left-box{
  padding-left: 8px;
  padding-right: 8px;
  display: block;
  box-sizing: border-box;
  width: 58.33333333%;
}
.course-box >  .left-box > .content{
  background: #fff;
  min-height: 630px;
  border-radius: 20px;
  padding: 30px 20px;
}
/* 课程的顶部导航 */
.course-box >  .left-box > .content > .con-title{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.course-box >  .left-box > .content > .con-title >.title-box{
  display: flex;
  width: 300px;
  justify-content: space-between;
  height: 39px;
  line-height: 39px;
}
.course-box >  .left-box > .content > .con-title >.title-box img{
  width: 38px;
  border: 0;
  vertical-align: middle;
}
.course-box >  .left-box > .content > .con-title >.title-box >.text1{
  font-weight: 600;
  font-size: 26px;
  color: #333;
}
.course-box >  .left-box > .content > .con-title >.title-box >.text2{
  margin-top: auto;
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 500;
  color: #9f9f9f;
}
.title-live-next-last-box{
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.title-live-next-last-box > img{
  width: 20px;
  cursor: pointer;
}
/* 课程的内容 */
.course-box >  .left-box > .content > .con-text{
  width: 650px;
  margin-left: -10px;
  margin-right: -10px;
  position: relative;
  height: auto;
}
.course-box >  .left-box > .content > .con-text > .box{
  width: 50%;
  float: left;
  position: relative;
  min-height: 1px;
  padding-left: 10px;
  padding-right: 15px;
}
.live-content-box{
    overflow: hidden;
  border-radius: 10px;
  margin-top: 20px;
  box-shadow: 0 4px 10px 0 rgba(0,0,0,.15);
}
.live-content-box>.text{
  padding: 15px 0 10px 0;
  font-weight: 600;
  color: #333;
  margin-left: 20px;
  text-shadow: 0 4px 10px rgba(0,0,0,.15);
}
.hover-img-scale-box{
  border-radius: 10px 10px 0 0;
}
.hover-img-scale-box >img{
  width: 100%;
  height: 162px;
  box-shadow: 0 4px 10px 0 rgba(0,0,0,.15);
}
.live-content-box >.end-box{
  color: #bac2c2;
  padding-bottom: 15px;
  margin-left: 20px;
}

/* 课程榜单 */
.course-box >  .right-box{
  padding-left: 8px;
  padding-right: 8px;
  display: block;
  box-sizing: border-box;
  width: 41.66666667%;
}
.course-box >  .right-box > .content{
  background: #fff;
  min-height: 610px;
  border-radius: 20px;
  padding: 30px 20px;
}
.course-box >  .right-box > .content >.title-box{
  width: 100%;
  height: 39px;
  display: flex;
  align-items: center
}
.course-box >  .right-box > .content >.title-box > img{
  margin-right: 12px;
  width: 38px;
  height: 38px;
  border: 0;
}
.course-box >  .right-box > .content >.title-box >.text{
  margin-right: 12px;
  font-weight: 600;
  font-size: 26px;
  color: #333;

}
.course-box >  .right-box > .content >.title-box >.text-small{
  margin-top: auto;
  margin-bottom: 5px;
  font-size: 14px;
  font-family: PingFangSC-Medium,PingFang SC;
  font-weight: 500;
  color: #9f9f9f;
}

.course-box >  .right-box > .content >.content-box{
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 20px;
  height: 510px;
  background: #fff;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,.1);
  border-radius: 20px;
  padding: 20px;
}
.course-box >  .right-box > .content >.content-box > img{
  margin-top: -40px;
  width: 140px;
  height: 61px;
}
.course-box >  .right-box > .content >.content-box > .content{
  margin-top: 10px;
  width: 100%;
}
.course-box >  .right-box > .content >.content-box > .content>.box1{
  width: 100%;
  display: flex;
  margin-bottom: 30px;
  cursor: pointer;
  position: relative
}
.left-num{
  width: 43px;
  height: 20px;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  background-color: red;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  border-radius: 10px 0 20px 0;
  color: #fff;
  font-size: 12px;
  padding-top: 0;
  z-index: 401;
}
.course-box >  .right-box > .content >.content-box > .content>.box1>.hover-img-scale-box{
  overflow: hidden;
  border-radius: 10px;
  margin-right: 12px;
}
.course-box >  .right-box > .content >.content-box > .content>.box1>.hover-img-scale-box > img{
  width: 170px;
  height: 100%;
  border-radius: 10px;
}
.title-price-box{
  padding-top: 5px;
}
.title-price-box > .text1{
  font-weight: 500;
  height: 39px;
  margin-bottom: 5px;
  color: #4e5054;
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
}
.title-price-box > .text2{
  color: #f32425;
  font-size: 20px;
  font-weight: 600;
}
.title-price-box > .text3{
  font-weight: 500;
  color: #b7bbc4;
  font-size: 14px;
}
.change-box{
  margin-top: 20px;
  width: 108px;
  height: 29px;
  background: linear-gradient(90deg,#fd952d,#f1534b);
  border-radius: 15px;
  color: #fff;
  font-weight: 500;
  border: none;
  cursor: pointer;
}
</style>